<template>
	<view class="parent-view">
		<view class="item-root" v-if="item.allwaysShow || selectList.length == 1" v-for="(item,index) in entryData" :key="index" :value="item" @tap="onEntryClick(item)">
			<image class="item-img" :src="item.imageUrl"></image>
			<view class="item-title"> {{item.title}} </view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			selectList: {
				type: Array,
				default: () => []
			},
		},
		
		watch:{
			selectList(val) {
				
			} 
		},

		data() {
			return {
				entryData: [{
						allwaysShow: false,
						position: 0,
						imageUrl: '/static/doc_menu_download.png',
						title: '打开',
					},
					// {
					// 	allwaysShow: false,
					// 	position: 1,
					// 	imageUrl: '/static/doc_menu_update.png',
					// 	title: '更新',
					// },
					{
						allwaysShow: false,
						position: 2,
						imageUrl: '/static/doc_menu_edit.png',
						title: '重命名',
					},
					{
						allwaysShow: true,
						position: 3,
						imageUrl: '/static/doc_menu_delete.png',
						title: '删除',
					},
					{
						allwaysShow: false,
						position: 4,
						imageUrl: '/static/doc_menu_info.png',
						title: '详情',
					}
				]
			}
		},
		methods: {
			onEntryClick(e) {
				console.log(e)
				this.$emit("onEntryClick", e)
			}
		}
	}
</script>

<style lang="scss">
	.parent-view {
		position: absolute;
		width: 92vw;
		bottom: 10upx;
		height: 130upx;
		background: #FFFFFF;
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);
		border-radius: 24px 24px 0px 0px;

		display: flex;
		flex-direction: row;
		padding: 30upx;
		// justify-content: space-between;
		
	}

	.item-root {
		align-items: center;
		align-content: center;
		margin: 0 25upx 0 25upx;
	}

	.item-img {
		width: 40upx;
		height: 40upx;
		padding: 20upx;
		background: rgba(248, 248, 248, 0.99);
		border-radius: 5px;

	}

	.item-title {
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
		line-height: 10px;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
